<template>
  <div class="flex-row component-giNmVXw4">
    <div class="flex-row items-end self-center space-x-8">
      <div class="flex-col items-center group space-y-12">
        <img class="image"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png" />
        <!-- <img class="image"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png" />
        <img class="image"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/716c8f65c2b8aa103208e9526a259e8b.png" /> -->
      </div>
      <div class="flex-col space-y-22">
        <div class="flex-col items-start">
          <span class="font_1">微信读书</span>
          <span class="font_3">85%的人使用</span>
        </div>
        <!-- <div class="flex-col items-start">
          <span class="font_1">个人邮箱</span>
          <span class="font_3">9%的人使用</span>
        </div>
        <div class="flex-col items-start">
          <span class="font_1">百度网盘</span>
          <span class="font_3">6%的人使用</span>
        </div> -->
      </div>
    </div>
    <div class="flex-col self-start group_2 space-y-32">
      <div class="flex-row items-center section_3" @click="chkrbookauth">
        <img class="shrink-0 image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926104431128810.png" />
        <span class="font_2 text">发到书架</span>
      </div>
      <!-- <div class="flex-row items-center section_3">
        <img class="shrink-0 image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926104431128810.png" />
        <span class="font_2 text">发到邮箱</span>
      </div>
      <div class="flex-row items-center section_3">
        <img class="shrink-0 image_2"
          src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/63a57ff15a7e3f0310da7e03/63a5811b717ee3001132b729/16717926104431128810.png" />
        <span class="font_2 text">生成链接</span>
      </div> -->
    </div>
    <van-popup v-model="popupVisible" position="top">
      <Al @closeAI="closeAI" :targetUrl="targetUrl" />
    </van-popup>
    <van-overlay :show="showloading" @click="showloading = false" >
    <div class="loadingDiv" v-if="showloading"><van-loading type="spinner" /></div></van-overlay>
  </div>
</template>

<script>
import Al from '../../components/al/al.vue';

export default {
  components: { Al },
  inject:['reload'],
  data() {
    return {
      popupVisible: false,
      targetUrl:'',
      showloading:false
    };
  },
  methods: {
     chkrbookauth() {
      this.showloading = true
      let uuid = JSON.parse(localStorage.getItem('userInfo')).uuid //获取用户的uuid
      this.$http.post('/chkrbookauth', { uuid }).then(res => {
        if (res.data.code === 1) {
          if(res.data.data === true ){
            this.syncauthorizationcode()
          }else{
            this.getrbookauth()
          }
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
      this.showloading = false
    },
    // 获取授权链接
    async getrbookauth() {
      let uuid = JSON.parse(localStorage.getItem('userInfo')).uuid //获取用户的uuid
      this.$http.post('/getrbookauth', { uuid }).then(res => {
        if (res.data.code === 1) {
          this.targetUrl = res.data.data
          this.onShow()
        } else {
          this.$toast.fail(res.data.msg);
        }
      })
    },
    // 同步到微信读书接口
    syncauthorizationcode() {
      let uuid = JSON.parse(localStorage.getItem('userInfo')).uuid //获取用户的uuid
      this.$http.post('/syncauthorizationcode', { uuid }).then(res => {
        if (res.data.code === 1) {
          this.$toast.success(res.data.msg);
          this.$parent.$parent.popupVisible = false
          this.reload()
        } else {
          this.$toast.fail(res.data.msg);
          this.$parent.$parent.popupVisible = false
        }
      })
    },
    onShow() {
      this.popupVisible = true;
    },
    closeAI() {
      this.popupVisible = false;
    }
  },
};
</script>

<style scoped lang="css">
.loadingDiv{
    position: absolute;
    left: 45%;
    top: 45%;
}
.component-giNmVXw4 {
  padding: 1.38rem 1.25rem;
  background-color: #ffffff;
  border-radius: 1.88rem;
  position: sticky;
  max-height: 90%;
  max-width: 90%;
  justify-content: center;
  align-items: normal;
  left: 1rem;
  top: 20rem;
}

.space-x-8>*:not(:first-child) {
  margin-left: 0.5rem;
}

.group {
  margin-bottom: 0.25rem;
}

.space-y-12>*:not(:first-child) {
  margin-top: 0.75rem;
}

.image {
  width: 2.44rem;
  height: 2.63rem;
}

.space-y-22>*:not(:first-child) {
  margin-top: 1.38rem;
}

.font_1 {
  font-size: 0.88rem;
  font-family: 'PingFang SC';
  line-height: 1.25rem;
  font-weight: 500;
  color: #060518e0;
}

.font_3 {
  font-size: 0.63rem;
  font-family: 'PingFang SC';
  line-height: 0.88rem;
  font-weight: 600;
  color: #06051899;
}

.group_2 {
  margin: 1.13rem 0.13rem 0 4.69rem;
}

.space-y-32>*:not(:first-child) {
  margin-top: 2rem;
}

.section_3 {
  padding: 0.25rem 0.38rem;
  background-color: #4ad2e4;
  box-shadow: 0px 0.5rem 1.25rem 0px #4ad2e414;
  border-radius: 0.72rem;
}

.image_2 {
  border-radius: 50%;
  width: 1.06rem;
  height: 0.94rem;
}

.font_2 {
  font-size: 0.75rem;
  font-family: 'PingFang SC';
  line-height: 1.06rem;
  font-weight: 600;
  color: #fefeff;
}

.text {
  margin: 0 0.25rem;
}
</style>
